<div class="body-container">
  <div class="table-content-area">
    <div class="table-search-area">
      <div class="search-inputs">
        <nz-input-group [nzPrefix]="prefixIconSearch">
          <input nz-input type="text" placeholder="Filter by name" i18n-placeholder="@@common.filter-by-name" [(ngModel)]="filter.metricName" (ngModelChange)="onSearch()">
        </nz-input-group>
        <ng-template #prefixIconSearch>
          <i nz-icon nzType="icons:icon-search"></i>
        </ng-template>
        <nz-select class="nz-select-40 rounded filter" [(ngModel)]="filter.eventType" (ngModelChange)="onSearch()">
          <nz-option [nzValue]="EventType.All" i18n-nzLabel="@@common.all" nzLabel="All"></nz-option>
          <nz-option [nzValue]="customEventType" i18n-nzLabel="@@expt.metric.custom-event-metric" nzLabel="Custom event"></nz-option>
        </nz-select>
      </div>

      <button nz-button nzType="primary" (click)="onCreateOrEditClick()">
        <i nz-icon nzType="icons:icon-add"></i>
        <ng-container i18n="@@expt.metric.add-metric">Add Metric</ng-container>
      </button>
    </div>

    <div class="table-wrapper">
      <nz-table #borderedTable style="margin-top: 20px;"
                nzFrontPagination
                nzShowPagination
                nzShowSizeChanger
                [nzPageSizeOptions]="[10, 20, 30]"
                nzSize="small"
                [nzLoading]="isLoading"
                [nzData]="pagedMetric.items">
        <thead>
        <tr>
          <th nzWidth="20%">Metric</th>
          <th nzWidth="20%" i18n="@@expt.metric.event-type">Event type</th>
          <th nzWidth="20%" i18n="@@expt.metric.event-name">Event name</th>
          <th nzWidth="20%" i18n="@@expt.metric.maintainer">Maintainer</th>
          <th i18n="@@common.actions">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr  *ngFor="let data of borderedTable.data">
          <td>{{data.name}}</td>
          <td>
            <span class="tag">
              <ng-container *ngIf="data.eventType === customEventType">
                <ng-container i18n="@@common.custom">Custom</ng-container>:&nbsp;
                <ng-container *ngIf="data.customEventTrackOption === customEventTrackConversion" i18n="@@common.conversion">Conversion</ng-container>
                <ng-container *ngIf="data.customEventTrackOption === customEventTrackNumeric" i18n="@@common.numeric">Numeric</ng-container>
              </ng-container>
              <ng-container *ngIf="data.eventType === pageViewEventType">
                Page View: <ng-container i18n="@@common.conversion">Conversion</ng-container>
              </ng-container>
              <ng-container *ngIf="data.eventType === clickEventType">
                Click: <ng-container i18n="@@common.conversion">Conversion</ng-container>
              </ng-container>
            </span>
          </td>
          <td>
            <ng-container *ngIf="data.eventType === customEventType">
              {{data.eventName}}
            </ng-container>
            <ng-container *ngIf="data.eventType === pageViewEventType">
              pageview
            </ng-container>
            <ng-container *ngIf="data.eventType === clickEventType">
              click
            </ng-container>
          </td>
          <td>{{ data.maintainerName || data.maintainerEmail }}</td>
          <td>
            <a style="color: #23AD7F" (click)="onCreateOrEditClick(data)" i18n="@@common.edit">Edit</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a
              style="color: #717D8A"
              i18n-nz-popconfirm="@@common.remove-confirm" nz-popconfirm="This operation cannot be reverted, are you sure to remove it?"
              nzPopconfirmPlacement="bottomRight"
              [nzPopconfirmOverlayStyle]="{minWidth: '240px'}"
              (nzOnConfirm)="archiveMetric(data)" [nzIcon]="iconTplDelete">
              <ng-container i18n="@@common.remove">Remove</ng-container>
            </a>
            <ng-template #iconTplDelete>
              <i nz-icon nzType="question-circle" nzTheme="fill"></i>
            </ng-template>
          </td>
        </tr>
        </tbody>
      </nz-table>
    </div>
  </div>
</div>

<app-metric-drawer [visible]="detailViewVisible" (close)="onDetailViewClosed($event)" [metric]="currentMetric"></app-metric-drawer>
